<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沟通详情</title>
    <link rel="stylesheet" href="/Public/css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="/Public/css/model.css">
    <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/css/pager.css">
    <link rel="stylesheet" href="/Public/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="/Public/css/style.css">
    <link href="/Public/css/animate.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/css/toast.css">
    <style>
        .modal-backdrop {
            position: relative;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1040;
            background-color: #000;
        }
        .phone_info {
            padding: 4% 5% 15%;
            line-height: 35px;
            color: black;
            background: #ffffff;
        }

        .main_C_left {
            width: 70%;
            display: inline-block;
        }

        .main_C_right {
            width: 28%;
            padding: 3% 2% 0 0;
            float: right;
            display: inline-block;
        }

        .main_C_right textarea {
            padding: 10px;
            margin-bottom: 15px;
        }

        .phone_info li {
            padding: 5px 15px;
            border-bottom: solid 1px #ddd;
        }

        .back_btn {
            width: 61px;
            height: 30px;
            border: none;
            float: right;
            background: url(/Public/image/back_btn.jpg) no-repeat center;
        }

        .time_div {
            color: #d6d3e6;
        }

        .content_div {
            border: 1px solid #e7eaec;
            box-shadow: none;
            margin-top: 10px;
            margin-bottom: 5px;
            padding: 10px 20px;
            font-size: 11px;
            line-height: 16px;
            background-color: #f5f5f5;
        }

        .common_btn {
            height: 30px;
            margin-right: 20px;
            border: solid 1px #ececec;
            color: #5d5e60;
            line-height: 25px;
            background: none;
        }

        .common_btn:hover {
            color: white;
            background: #abdde6;
            border: solid 1px #abdde6;
        }
    </style>
</head>

<body>
<div id="main_C">
    <div class="scrollbar animated fadeInRight" id="style-1" style="overflow:scroll;overflow-x:hidden;margin: 0;width: 100%" class="animated fadeInRight">
        <div class="title_info">
            <span>沟通详情</span>
        </div>
        <div class="main_C_left">
            <ul class="white_bgColor phone_info" id="myModal">
                <li>
                    <span style="color: #A7B1C2;">电话记录</span>
                    <input class="back_btn" type="button" onclick="javascript:window.history.go(-1);"/>
                </li>
                <volist name="data" id="vo">
                    <li>
                        <div>
                            <span style="color: #676a6c;"><{$vo.admin_name}>向用户</span>
                            <a style="color: #337ab7;"><{$vo.truename}>[<{$vo.user_mobile}>]</a>
                            <span>打电话</span>
                        </div>
                        <div class="time_div">
                            <span><{$vo.ctime}></span>
                            <input data-toggle="modal" data-target=".bs-example-modal-sm" class="common_btn"
                                   type="button" onclick="get_content('<{$vo.content}>','<{$vo.id}>')" value="修改"/>
                        </div>
                        <div class="content_div">
                            <span style="color: #676a6c;">沟通内容：</span>
                            <span><{$vo.content}></span>
                        </div>
                    </li>
                </volist>
            </ul>
            <div class="modal fade bs-example-modal-sm" style="background: none" tabindex="-1" role="dialog"
                 id="edit_old"
                 aria-labelledby="mySmallModalLabel">
                <div class="modal-dialog" role="document" id="feedback_content">
                    <div class="modal-content">
                        <p>回复</p>
                        <textarea name="" id="edit_content" cols="66" rows="10"></textarea>
                        <input type="button" onclick="edit_content()" value="确定"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="main_C_right" id="main_right">
            <p>回复</p>
            <textarea name="" id="text_content" cols="37" rows="10" placeholder="请输入备注信息"></textarea>
            <input class="common_btn" type="button" onclick="remark()" value="添加"/>
            <input style="display: none" type="text" id="content_id"/>
        </div>
    </div>
    <script src="/Public/js/jquery-3.2.1.js"></script>
    <script src="/Public/js/bootstrap.min.js"></script>
    <script src="/Public/js/toast.js"></script>
    <script src="/Public/js/layer/layer.js"></script>
    <script src="/Public/js/layui/layui.js"></script>

    <script>

        //点击修改 获取原内容
        function get_content(content, id) {
            $("#edit_content").val(content);
            $("#content_id").val(id);
        }


        var vid = "<{$vid}>";
        //编辑回复
        function edit_content() {

            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            var edit = $("#edit_content").val();
            var id = $("#content_id").val();

            if (edit == "" || edit == null) {
                layer.close(index);
                $('#feedback_content').toast({
                    content: '回复不能为空！',
                    duration: 1000
                });
                return false;
            }

            var url = "<{$SERVER_NAME}>/Outbound/edit_content";
            layer.alert("确定修改！", {title: '提示框', icon: 3}, function (index) {
                $.post(url, {id: id, edit_content: edit}, function (data) {
                    console.log('909090', data);
                    if (data.code = '1001') {
                        $('#feedback_content').toast({
                            content: '修改成功！',
                            duration: 1000
                        });
                        window.location.reload();
                        $('#edit_old').modal('hide');
                    }
                });
                layer.close(index);
            });
            layer.close(index);
        }

        //备注回复
        function remark() {
            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });

            var content = $("#text_content").val();
            if (content == "" || content == null) {
                layer.close(index);
                $('#main_right').toast({
                    content: '回复不能为空！',
                    duration: 1000
                });
                return false;
            }
            var url = "<{$SERVER_NAME}>/Outbound/outbound_result";
            layer.alert("确定回复！", {title: '提示框', icon: 3}, function (index) {
                $.post(url, {vid: vid,content:content}, function (data) {
                    console.log('00000', data);
                    if (data.code = '1001') {
                        window.location.reload();
                        $('#main_right').toast({
                            content: '回复成功！',
                            duration: 1000
                        });
                        $("#text_content").val("");
                    } else {
                        $('#main_right').toast({
                            content: '回复失败！',
                            duration: 1000
                        });
                    }
                });
                layer.close(index);
            });
            layer.close(index);
        }

        $('#myModal').modal(options);
    </script>
</body>
</html>